html,body,#app,#__next{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	color: #444;
	font-size: 15px;
	display: inline-block;
	-webkit-overflow-scrolling: touch;
}
html,body{
	overflow: hidden;
}
*{outline: none !important;padding: 0;margin: 0;box-sizing: border-box;}
a,a:hover,a:link,a:active,a:visited {text-decoration:none !important}

@themeColor_00:#33495E;
@themeColor_01:#425d77;

//@placeholderColor: #618ab3;
@placeholderColor: #CCC;
::-moz-placeholder {  color:@placeholderColor;opacity:1;  }
input:-ms-input-placeholder{  color: @placeholderColor;opacity:1;  }
input::-webkit-input-placeholder{  color: @placeholderColor;opacity:1;  }

.ellipsis{  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;  }
.no-select{  -moz-user-select: none;  -webkit-user-select: none;  -ms-user-select: none;  }


.btn{
	.no-select;
	min-width: 80px;
	text-align: center;
	border-radius: 3px ;
	cursor: pointer;
	display: inline-block;
	padding: 4px 12px;
	border: 0;
}
.btn-opacity{
	background-color: #FFF;
	color: #777;
	border: 1px solid #CCC;
	&:hover{
		background-color: rgba(181, 181, 181, 0.18);
	}
	&:active{
		box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.125)
	}
}

#app{
	overflow: auto;
}
.cos-a{
	color: #349bff;
	span{
		cursor: pointer;
	}
}

.app-head{
	width: 100%;
	height: 75px;
	background-color: @themeColor_00;
	padding: 0 10%;
	position: relative;
	div{
		height: 100%;
		float: left;
	}
	.head-msg{
		.no-select;
		display: flex;
		align-items: center;
		width: 250px;
	}
	.head-icon{
		//background: url("../static/sun.svg") center center no-repeat;
		background: url("../images/logo_main.png") center center no-repeat;
		width: 50px;
		margin-right: 10px;
		background-size: 100%;
	}
	.head-text{
		color: #FFFFFF;
		font-weight: 700;
		font-size: 17px;
		cursor: default;
		display: flex;
		align-items: center;
		letter-spacing: 2px;
	}
	.head-search{
		float: right;
		cursor: default;
		display: flex;
		align-items: center;
		width: calc(~"(100% - 250px)*0.7");
		max-width: 280px;
		.search-box{
			border: 1px solid #F0F0F0;
			width: 100%;
			height: 30px;
			border-radius: 5px;
			align-items: center;
			display: flex;
			i{
				color: #FFF;
				margin-left: 10px;
				font-size: 16px;
			}
			.search-text{
				width: calc(~"100% - 40px");
				margin-left: 5px;
				height: 26px;
				background-color: rgba(255,255,255,0);
				border: 0;
				color: #DDD;
			}
		}
		.fa-search{
			cursor: pointer;
		}
	}
}

.app-body{
	width: 100%;
	min-height: calc(~"100% - 100px");
	padding: 0 10% 10px;
	background-color: #F0F0F0;
	overflow: hidden;
}

.peer-box{
	width: 100%;
	height: 50px;
	background-color: #FFF;
	margin-top: 10px;
	float: left;
	display: flex;
	align-items: center;
	padding: 0 10px;
	justify-content: space-between;
	.box-head{
		padding: 0;
		border: 0;
		font-size: 16px;
	}
	.peer-info{
		font-weight: 700;
		width: 100%;
		float: left;
		display: flex;
		position: relative;
	}
	.peer-num{
		position: absolute;
		right: 0;
	}
	i.fa-search{
		width: 20px;
		margin-right: 5px;
		color: #1F7DDF;
		display: flex;
		align-items: center;
	}
}

.search-x-box{
	width: 100%;
	height: 50px;
	background-color: #FFF;
	margin-top: 10px;
	float: left;
	display: flex;
	align-items: center;
	padding: 0 10px;
	justify-content: space-between;
	.search-info{
		font-weight: 700;
		width: 100%;
		float: left;
		display: flex;
		position: relative;
		height: 100%;
		align-items: center;
	}
	i.fa-search{
		width: 20px;
		margin-right: 5px;
		color: #1F7DDF;
		display: flex;
		align-items: center;
	}
	.search-input-box{
		position: absolute;
		right: 0;
		width: 70%;
		max-width: 400px;
	}
	.search-text{
		width: 100%;
		margin-left: 5px;
		height: 26px;
		background-color: rgba(255,255,255,0);
		border: 1px solid #DDD;
		color: #DDD;
	}
}

.block-box,.tx-box,.peerList-box{
	height: 270px;
	background-color: #FFF;
	margin-top: 10px;
	float: left;
	font-size: 16px;
	i{  width: 20px;  }
	i.fa-cubes{
		margin-right: 5px;
		color: #1FC3E6;
	}
	i.fa-exchange{
		margin-right: 5px;
		color: #70C381;
	}
}
.tx-table{
	table-layout: fixed;
	th:first-child{
		text-align: left;
	}
	td:first-child{
		text-align: left;
	}
	tbody>tr:hover{
		cursor: pointer;
		animation: toGray 0.3s forwards;
	}
	div.ellipsis{
		width: calc(~"100% - 250px");
		display: inline-block;
	}
	td.ellipsis{

	}
}
.block-box{
	width: 100%;
}

table.block-table{
	th{
		width: 25%;
	}
}

table.theme-table{
	width: 100%;
	border-collapse: collapse;
	th{
		color: #999;
		font-size: 14px;
	}
	thead,th{
		background-color:#F7FCFF;
	}
	th,td{
		height: 30px;
		text-align: center;
		font-family: Arial, 微软雅黑;
		font-size: 14px;
		padding: 5px 10px;
	}
	tr{
		border-bottom: 1px solid #EEE;
	}
	tbody>tr:last-child{
		border-bottom: 0;
	}
	td.table-time-column,th.table-time-column{
		width: 170px;
	}
	tr.empty-row{
		.no-select;
		cursor: default;
		>td{
			text-align: center;
		}
	}
}

.box-head{
	width: 100%;
	height: 40px;
	line-height: 39px;
	padding: 0 10px;
	border-bottom: 1px solid #EEE;
	background-color: #F7F7F7;
	.box-name{
		font-weight: 700;
		float: left;
		color: @themeColor_00;
	}
	.box-value{
		cursor: default;
		float: right;
		color: @themeColor_00;
		font-weight: 700;
	}
}

.box-body{
	width: 100%;
	height: calc(~"100% - 41px");
	overflow: auto;
}

.tx-box{
	width: calc(~"50% - 5px");
	margin-right: 10px;
}
.peerList-box{
	width: calc(~"50% - 5px");
}

table.peerList-table{
	td:nth-child(2){
		display: flex;
		justify-content: center;
		align-items: center;
	}
	td:nth-child(1),th:nth-child(1){
		text-align: left;
	}
	.table-health-column{
		width: 130px;
	}
	tbody{
		tr:hover{
			cursor: pointer;
			animation: toGray 0.3s forwards;
		}
	}
}

@keyframes toGray{
	100%{
		background-color: #F9F9F9;
	}
}

.block-detail-box{
	padding: 10px 20px;
	min-height: 350px;
}
.tx-detail-table,.block-detail-table{
	table-layout: fixed;
	word-break: break-word;
	td:first-child{
		.ellipsis;
		width: 120px;
	}
	td:nth-child(2){
		text-align: left;
	}
}
.tx-detail-table{
	tbody{
		tr:nth-child(3){
			td{
				background-color: #F9F9F9;
				height: 2px;
			}
		}
	}
}

.peerDetail-box{
	width: 100%;
	.i-title{
		width: 100%;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.title-text{
			font-size: 19px;
			font-weight: 700;
		}
		.title-back:hover{
			animation: toGray 0.3s forwards;
		}
		.title-back{
			.no-select;
			height: 30px;
			width: 70px;
			border: 1px solid #AAA;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 4px;
			cursor: pointer;
		}
	}
	.i-peer{
		width: 200px;
		margin-right: 15px;
		.item-body{
			display: flex;
			align-items: center;
		}
		table{
			width: 100%;
			height: 70px;
			td{
				padding: 5px;
			}
			td:nth-child(1){
				text-align: right;
			}
		}
	}
	.i-item-box{
		border: 1px solid #E7E7E7;
		background-color: #F7F7F7;
		padding: 10px;
		float: left;
		.item-head{
			height: 30px;
		}
		.item-body{
			height: calc(~"100% - 30px");
			width: 100%;
			background-color: #FFF;

		}
	}
	.i-network,.i-cpu{
		height: 220px;
		margin-top: 15px;
		width: 100%;
	}
	.i-peer,.i-memory,.i-disk{
		height: 250px;
		width: calc(~"33% - 8px");
	}
	.i-memory{
		margin-right: 15px;
	}
	.i-disk{

	}
}
.peer-state{
	width: 15px;
	height: 15px;
	border-radius: 15px;
}
.app-foot{
	.ellipsis;
	.no-select;
	float: left;
	width: 100%;
	background-color: #F5F5F5;
	height: 25px;
	text-align: center;
	color: #CCC;
	display: flex;
	align-items: center;
	justify-content: center;
}
.loading-mask{
	.no-select;
	cursor: default;
	display: none;
	position: absolute;
	z-index: 9999;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0);
	left: 0;
	top:0;
	align-items: center;
	.loading-pic{
		background:url("../images/loading.png") rgba(0, 0, 0, 0);
		background-size: 100%;
		width: 90px;
		height: 90px;margin: 0 auto;
		animation: Loading_rotate 1s infinite linear;
	}
}
.loading-mask.show{
	display: flex !important;
	animation: Loading_mask 0.5s forwards;
}
@keyframes Loading_rotate{
	100%{  transform:rotate(360deg);  }
}




@media screen and (max-width:470px) {
	.app-head{
		display: flex;
		justify-content: center;
		height:50px;
		.head-icon{
			width:25px;
		}
		.head-msg{
			width:auto;
		}
	}
	.app-body{
		padding:0 10px 10px;
		.search-input-box{
			width: 100%;
			z-index: 1;
		}

		table.block-table{
			th:nth-child(3){
				display: none;
			}
			td:nth-child(3){
				display: none;
			}
		}

		.tx-box{
			width:100%;
		}

		.peerList-box{
			width:100%;
		}
	}

}
